<template>
  <div>
    <div style="background: #FFFFFF;padding: 10px 24px 30px 24px;width: 100%;">
      <span style="font-size: 20px;display: inline-block;font-weight: 700;line-height: 48px">首页</span>
      <div style="display: flex ; align-items: center;">
        <img src="@/common/assets/logo_small.png" alt="" style="width: 100px;margin-left: -20px">

        <div style="display: flex ;flex-direction: column">
        <span style="font-size: 20px;margin-bottom: 12px">早安，勤劳的 <span
            style="font-weight: 600">BUG工程师</span>，祝您开心每一天！</span>
          <span class="text_top">XXXX－某某某事业群－某某平台部－隔壁的－王同学</span>
        </div>

        <div style="flex: 1 1 0;"></div>

        <div class="_work_item_">
          <div class="text_top">代办</div>
          <div class="text_count">99+</div>
        </div>
        <span class="_xian_"></span>

        <div class="_work_item_">
          <div class="text_top">团队内排名</div>
          <div class="text_count"> 3 / 68</div>
        </div>
        <span class="_xian_"></span>

        <div class="_work_item_">
          <div class="text_top">项目访问</div>
          <div class="text_count">34W+</div>
        </div>
      </div>
    </div>
    <div style="margin: 20px 20px 0 20px;">

      <a-row :gutter="20">
        <a-col :span="16">
          <!--进行中的事件-->
          <a-card shadow="never" class="noBoxLightShadow">
            <template #header>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span>进行中的事件</span>
                <a-button type="text">全部内容</a-button>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
          </a-card>
          <!--动态-->
          <a-card shadow="never" style="margin-top: 20px" class="noBoxLightShadow">
            <template #header>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span>动态</span>
                <a-button type="text">全部内容</a-button>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <!--快速开始/便捷导航-->
          <a-card shadow="never" class="noBoxLightShadow">
            <template #header>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span>快速开始 / 便捷导航</span>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
          </a-card>

          <!--装X指数-->
          <a-card shadow="never" style="margin-top: 20px" class="noBoxLightShadow">
            <template #header>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span>装X指数</span>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
          </a-card>


          <!--团队-->
          <a-card shadow="never" style="margin-top: 20px" class="noBoxLightShadow">
            <template #header>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span>团队</span>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
          </a-card>
        </a-col>

      </a-row>

    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, onMounted, onUnmounted, onUpdated} from 'vue';

export default defineComponent({
  name: 'WorkPlace',
  components: {},
  setup() {
    let {$http, $store} = getCurrentInstance().appContext.config.globalProperties;
    onMounted(() => {

    })
    onUpdated(() => {
    })
    onUnmounted(() => {
    })

    return {}
  },
  created() {
  },
  mounted() {
    ////////console.log(this.$route.path, "WorkPlace>>>>>>mounted")

    //全局监听-刷新
    this.$event.$on('refresh', (data) => {
      if ('/index' == data['path']) {
        ////////console.log(this.$route.path, ">>>WorkPlace>>>执行刷新界面>>>", data)
      }
    })

  },
});
</script>

<style scoped lang="less">
.noBoxLightShadow {
  border: transparent !important;
  box-shadow: 0 2px 20px 0 rgba(182, 180, 180, 0.1)
}

.text_top {
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
}

.text_count {
  margin-top: 4px;
  color: rgba(0, 0, 0, .85);
  font-size: 24px;
}

._work_item_ {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px
}

._xian_ {
  width: 1px;
  height: 40px;
  background-color: #f0f0f0;
}
</style>
